@import 'controls';

.e-page {
    width: 100%;
    display: flex;
    flex-flow: column;
    min-width: 0;

    &--icons &-component{
        padding: 50px;
        overflow: hidden;
    }

    &-component {
        z-index: 1;
        position: relative;
        overflow: auto;
        padding: 20px;
        flex: 1;
        transform: scale(1);

        &--no-paddings {
            padding: 0;
        }

        &--no-scale {
            transform: none;
        }
    }

    &-examples {
        position: relative;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        display: flex;
        font-size: 16px;


        .sidebar {
            $sidebarWidth: 230px;
            $sidebarCollapsedWidth: 40px;

            display: flex;
            flex-flow: column;
            position: relative;
            flex-shrink: 0;
            width: $sidebarWidth;
            padding: 10px 0 0;
            -webkit-box-shadow: inset -6px 0px 24px -22px rgba(66, 68, 90, 1);
            -moz-box-shadow: inset -6px 0px 24px -22px rgba(66, 68, 90, 1);
            box-shadow: inset -6px 0px 24px -22px rgba(66, 68, 90, 1);
            transition: .2s ease-in-out;
            transition-property: color, margin-left, padding-right;

            &-collapsed {
                margin-left: ($sidebarCollapsedWidth - $sidebarWidth);
                padding-right: $sidebarCollapsedWidth;
                color: transparent;
                pointer-events: none;
            }

            &-toggle {
                position: absolute;
                right: 4px;
                top: 6px;
                pointer-events: auto;
            }

            &-heading {
                margin-bottom: 10px;
                font-weight: 500;
                padding: 0 40px 0 10px;
            }

            &-search {
                padding: 0 12px 12px;
                position: relative;

                &__button {
                    position: absolute;
                    top: 8px;
                    right: 16px;

                    &-icon {
                        color: rgb(107 114 128)
                    }
                }
            }

            &-list {
                overflow: auto;
                padding-left: 0;
                padding-bottom: 20px;
            }
        }
    }

    [data-tooltip] {
        position: relative;

        &::after {
            position: absolute;
            pointer-events: none;
            opacity: 0;
            color: black;
            content: attr(data-tooltip);
            left: 50%;
            top: calc(100% + 10px);
            border-radius: 3px;
            box-shadow: 0 0 5px 2px rgba(100, 100, 100, 0.6);
            background-color: #fff;
            z-index: 10;
            padding: 2px;
            font-size: 14px;
            width: 10px;
            overflow: hidden;
            transform: translateY(-20px) translateX(-50%);
            transition: all 150ms cubic-bezier(.25, .8, .25, 1);
        }

        &:hover::after {
            width: auto;
            opacity: 1;
            transform: translateY(0) translateX(-50%);
            transition-duration: 300ms;
        }
    }
}
